<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片区 -->
      <el-card class="box-card">
        <!-- form表单组件应用 
        -->
        <el-form ref="addFormRef" :model="addForm" label-width="120px">
          <!--:model作用：可以使得el-form针对表单的全部信息进行收集，固定属性-->
          <el-form-item label="学科：" prop="subjectID">
            <el-select v-model="addForm.subjectID">
              <el-option
                v-for="item in subjectIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录：" prop="catalogID">
            <el-select v-model="addForm.catalogID">
              <el-option
                v-for="item in catalogIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业：" prop="enterpriseID">
            <el-select v-model="addForm.enterpriseID">
              <el-option
                v-for="item in enterpriseIDList"
                :key="item.id"
                :label="item.shortName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市：">
            <el-select v-model="addForm.province" @change="addForm.city=''">
              <el-option v-for="(item,k) in provinces()" :key="k" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="addForm.city">
              <el-option
                v-for="(item,k) in citys(addForm.province)"
                :key="k"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向：" prop="direction">
            <el-select v-model="addForm.direction">
              <el-option v-for="item in directionList" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="题型：" prop="questionType">
            <!-- 单选按钮 
            el-radio-group组别： v-model 设置或接收 选中项目
            el-radio小项目：label设置单选按钮的value值
              服务器端要求value的值是"字符串"的
              所以item.value+'' 类型转换
            -->
            <el-radio-group v-model="addForm.questionType">
              <el-radio
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.value.toString()"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="难度：" prop="difficulty">
            <el-radio-group v-model="addForm.difficulty">
              <el-radio
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.value.toString()"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="题干：" prop="question">
            <el-input type="textarea" v-model="addForm.question"></el-input>
          </el-form-item>

          <!-- questionType===3：简单，此时大家都不显示 -->
          <el-form-item label="选项：" v-if="addForm.questionType!=='3'">
            <template v-if="addForm.questionType==='1'">
              <!-- 
              【一】单选框按钮
              ABCD单选按钮选项表单域绘制 el-radio应用 
              label：当前单选按钮的value值
              对象访问自己成员：对象.成员名  或  对象[成员名]
              1. 输入框v-model与title结合非常合适，输入xx收集xx即可
              2. 单选按钮不能参考title设置v-model，因为表单对象要求boolean值，v-model与isRight结合不能获得boolean值
                 解决方案：通过一个第3 方临时成员，接收单选框选中的信息，然后根据临时成员设置isRight为相关boolean值
              -->
              <el-radio v-model="singleSelect" label="0">A.
                <el-input v-model="addForm.options[0].title"></el-input>
              </el-radio>
              <br>
              <el-radio v-model="singleSelect" label="1">B.
                <el-input v-model="addForm.options[1].title"></el-input>
              </el-radio>
              <br>
              <el-radio v-model="singleSelect" label="2">C.
                <el-input v-model="addForm.options[2].title"></el-input>
              </el-radio>
              <br>
              <el-radio v-model="singleSelect" label="3">D.
                <el-input v-model="addForm.options[3].title"></el-input>
              </el-radio>
            </template>

            <template v-if="addForm.questionType==='2'">
              <!-- 【二】复选框按钮 -->
              <!-- ABCD4个复选框项目 
              复选框 特点：是否勾选会获得到boolean，true选中、false不选中
              所以，isRight成员可以像 title一样 与 el-checkbox的v-model直接联系
              这样看，复选框表单域实现 较比 单选框 更方便(不需要第3方成员转换了)
              -->
              <el-checkbox v-model="addForm.options[0].isRight">A.
                <el-input v-model="addForm.options[0].title"></el-input>
              </el-checkbox>
              <br>
              <el-checkbox v-model="addForm.options[1].isRight">B.
                <el-input v-model="addForm.options[1].title"></el-input>
              </el-checkbox>
              <br>
              <el-checkbox v-model="addForm.options[2].isRight">C.
                <el-input v-model="addForm.options[2].title"></el-input>
              </el-checkbox>
              <br>
              <el-checkbox v-model="addForm.options[3].isRight">D.
                <el-input v-model="addForm.options[3].title"></el-input>
              </el-checkbox>
            </template>
          </el-form-item>

          <el-form-item label="答案：" prop="answer">
            <el-input type="textarea" v-model="addForm.answer"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remarks">
            <el-input type="textarea" v-model="addForm.remarks"></el-input>
          </el-form-item>
          <el-form-item label="标签：" prop="tags">
            <el-input type="text" v-model="addForm.tags"></el-input>
          </el-form-item>
          <el-form-item>
            <!-- resetFields给全部表单做重置操作，每个项目必须设置prop，prop的值与v-model的后缀名称一致 -->
            <el-button type="info" @click="$refs.addFormRef.resetFields()">取消/重置</el-button>
            <el-button type="primary" @click="tianjia()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// 添加试题
import { add } from '@/api/hmmm/questions.js'
// 企业
import { list as listCompanys } from '@/api/hmmm/companys.js'

import { simple as simpleSubjects } from '@/api/hmmm/subjects' // 学科
import { simple as simpleDirectorys } from '@/api/hmmm/directorys' // 二级目录
import { provinces, citys } from '@/api/hmmm/citys' // 城市和区县
// 常量(方向、题型、难度)
import {
  direction as directionList,
  questionType as questionTypeList,
  difficulty as difficultyList
} from '@/api/hmmm/constants'

export default {
  name: 'QuestionsNew',
  watch: {
    // 对singleSelect做监听
    // 0:  true  false false false
    // 1:  false  true  false false
    // 2:  false  false  true false
    // 3:  false  false  false  true
    singleSelect(newV) {
      // 1. 全部项目的isRight为false
      for (var i = 0; i < 4; i++) {
        this.addForm.options[i].isRight = false
      }
      // 2. 当前选中项目的isRight为true，并且选中项目的下标 与 newV 一致
      this.addForm.options[newV].isRight = true
    }
  },
  data() {
    return {
      enterpriseIDList: [], // 企业
      subjectIDList: [], // 学科
      catalogIDList: [], // 二级目录
      questionTypeList, // 题型(简易成员赋值)
      directionList, // 方向(简易成员赋值)
      difficultyList, // 难度(简易成员赋值)

      singleSelect: '', // 临时成员，接收“选项”单选按钮选中的信息
      // 0  1  2  3
      // 与isRight的关系如下
      // 0:  true  false false false
      // 1:  false  true  false false
      // 2:  false  false  true false
      // 3:  false  false  false  true

      // 添加试题 表单数据对象
      addForm: {
        // 如下表单字段名称来自yapi数据接口
        difficulty: '1', // 难度，默认设置"简单"选中,服务器端要求是字符串复制
        questionType: '1', // 题型，默认设置"单选"选中,服务器端要求是字符串复制
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        enterpriseID: '', // 企业
        city: '', // 区县
        province: '', // 城市
        direction: '', // 方向

        question: '', // 题干
        answer: '', // 答案
        remarks: '', // 备注
        tags: '', // 标签
        videoURL: 'http://www.xxx.com', // 解析视频，固定内容即可
        // 选项表单数据对象部分(数组对象集)
        options: [
          // {code: '编号ABCD', title: '当前项目文字答案描述',
          //   img: '当前项目图片答案', isRight: boolean表明当前项目是否是答案},
          { code: 'A', title: '', img: '', isRight: false },
          { code: 'B', title: '', img: '', isRight: false },
          { code: 'C', title: '', img: '', isRight: false },
          { code: 'D', title: '', img: '', isRight: false }
        ]
      }
    }
  },
  created() {
    this.getEnterpriseIDList() // 企业
    this.getSubjectIDList() // 学科
    this.getCatalogIDList() // 二级目录
  },
  methods: {
    provinces, // 获得城市的方法(简易成员赋值)
    citys, // 获得地区的方法(简易成员赋值)

    // 添加试题
    async tianjia() {
      // await保证"异步"程序变为"同步"程序
      // await没有执行完毕，后续代码不要执行
      // 避免特殊情况：数据添加了，但是列表页面没有显示，
      //              而是再次添加时候，再把上次的添加数据给显示出来
      const result = await add(this.addForm)
      // 成功提示
      this.$message.success('添加试题成功')
      // 页面跳转--->列表页面
      this.$router.push('/questions/list')
    },

    // 企业
    async getEnterpriseIDList() {
      const result = await listCompanys()
      // console.log(result)
      this.enterpriseIDList = result.data.items
    },

    // 学科 列表信息
    async getSubjectIDList() {
      var result = await simpleSubjects()
      this.subjectIDList = result.data
    },
    // 目录 列表信息
    async getCatalogIDList() {
      var result = await simpleDirectorys()
      this.catalogIDList = result.data
    }
  }
}
</script>

<style scoped>
.el-input {
  margin-top: 10px;
}
</style>
